<template>
  <div class="home">
    <Banner :banners="banners" :duration="3000" />
    <Channels @chanChange="handleChange" />
    <Loading v-show="isLoading" />
    <NewsList v-show="!isLoading" :news="news" />
  </div>
</template>

<script>
// @ is an alias to /src
import Banner from '@/components/Banner'
import Channels from '@/components/news/Channels'
import NewsList from '@/components/news/NewsList'
import Loading from '@/components/Loading'
import { getNews } from '@/services/newsService'

export default {
  name: 'Home',
  components: {
    Banner,
    Channels,
    NewsList,
    Loading
  },
  data () {
    return {
      banners: [
        { url: require('@/assets/banner/banner1.jpg'), link: 'http://localhost:8080/' },
        { url: require('@/assets/banner/banner2.jpg'), link: 'http://localhost:8080/' },
        { url: require('@/assets/banner/banner3.jpg'), link: 'http://localhost:8080/' }
      ],
      news: [],
      isLoading: true
    }
  },
  methods: {
    async handleChange (channelId) {
      // 获取到数据之前, isLoading 为 true
      this.isLoading = true
      var res = await getNews(channelId) // 正在获取数据
      if (channelId === '5572a108b3cdc86cf39001cd') {
        this.news = res.contentlist.slice(0, 10)
        // 获取到数据之后, isLoading 为 false
        this.isLoading = false
      } else {
        this.news = res.contentlist.slice(10)
        // 获取到数据之后, isLoading 为 false
        this.isLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
